require(['init'], function () {

  function BannerInfo(options) {
    options = options || {};
    this.data = options.data || this.getDefaultData();
    this.$dom = $('<div class="formList"></div>');

    this.init(this.configList);
  }

  BannerInfo.prototype = {
    configList: [
      {
        title: '<span class="icon icon-size-16 icon-asterisk"></span>'+i18next.t('table.imageupload')+'',//图片上传
        content: {
          init: function ($content, root) {
            root.$uploadCoverBox = $('<span class="icon icon-uploadimg" id="J_uploadCover">\
              <img width="800" height="187.5" id="J_img">\
              <input type="file" name="Filedata" multiple="multiple" data-url="/api/file/upload">\
            </span>').appendTo($content);
            $('<p style="margin-top:5px;">'+i18next.t('table.suggestimagesize')+'</p>').appendTo($content)//(建议图片大小为1920*450)
            var $uploadCoverThumb = root.$uploadCoverBox.find('img')
            var $uploadInput = root.$uploadCoverBox.find('input')
            var coverUploadInput = new UploadInput({
              $dom: $uploadInput,
              done: function (uploadImgSrc) {
                var uploadImgFullSrc='/api/file?u=' + uploadImgSrc;

                if (uploadImgSrc) {
                  new ImgCropTool({
                    imgSrc: uploadImgFullSrc,
                    cropSize:[640, 150, 'courseCover'],
                    allowResize: false,
                    success:function(imgSrc){
                      var imgCropSrc = '/api/file?u=' + imgSrc;
                      root.$uploadCoverBox.attr('data-value', imgCropSrc);
                      $uploadCoverThumb.attr('src', imgCropSrc);
                      root.data.image = imgCropSrc
                    }
                  })
                }
              }
            });
          },
          update: function ($content, root, formData) {
            if(formData.image) {
              root.$uploadCoverBox.find('img').attr('src', formData.image)
            }
          }
        }
      },
      {
        title:i18next.t('table.link') ,//链接
        content: {
          init: function ($content, root) {
            root.$urlInput = $('<input type="text" class="form-control" style="width: 400px">').appendTo($content);
            root.$urlInput.on('change', function () {
              root.data.url = $.trim(root.$urlInput.val());
            })
          },
          update: function ($content, root, formData) {
            root.$urlInput.val(formData.url).change();
          }
        }
      },
      {
        title: i18next.t('table.describe'),//描述
        content: {
          init: function ($content, root) {
            root.$descInput = $('<input type="text" class="form-control" style="width: 400px">').appendTo($content);
            root.$descInput.on('change', function () {
              root.data.description = $.trim(root.$descInput.val());
            })
          },
          update: function ($content, root, formData) {
            root.$descInput.val(formData.description).change();
          }
        }
      },
      {
        title:i18next.t('table.enabledstate'),//启用状态
        content: {
          init: function ($content, root) {
            root.$useCheck = $('<span class="icon icon-size-16 icon-checkbox" data-type="checkbox">\
                <input type="checkbox" name="use" data-checkedmax="1" value="1">\
            </span>').appendTo($content);
            root.$useCheck.on('change', function () {
              root.data.status = root.$useCheck.find('input').prop('checked') ? 1 : 0
            })
          },
          update: function ($content, root, formData) {
            if(formData.status == 1) {
              root.$useCheck.find('[type="checkbox"]').prop('checked', true).parent().addClass('checked')
            }
          }
        }
      }
    ],

    createFormLi: function (liConfig) {
      var $formLi = $('<div class="formLi"></div>').appendTo(this.$dom);
      $('<div class="formTitle"></div>').html('<span class="titleText">'+ liConfig.title +'</span>').appendTo($formLi);
      var $formContent = $('<div class="formContent"></div>').appendTo($formLi);
      liConfig.content.init($formContent, this);
      if(liConfig.content.update) {
        liConfig.content.update($formContent, this, this.data);
      }
    },

    init: function (liConfigList) {
      $.each(liConfigList, function (i, cur) {
        this.createFormLi(cur)
      }.bind(this));

    },

    getDefaultData: function () {
      return {
        status: 0
      }
    }
  }

  function getBannerList() {
    ajaxMethod({
      url: '/api/adimages',
      success: function (data) {
        var $listTable = $('#J_bannerlist').html('')
        $thead = $('<thead>\
          <tr>\
            <th>'+i18next.t('table.no')+'</th>\
            <th>'+i18next.t('table.picture')+'</th>\
            <th>'+i18next.t('table.link')+'</th>\
            <th>'+i18next.t('table.describe')+'</th>\
            <th>'+i18next.t('table.enabledstate')+'</th>\
            <th>'+i18next.t('table.handle')+'</th>\
          </tr>\
        </thead>').appendTo($listTable)

        var $tbody = $('<tbody></tbody>').appendTo($listTable)
        $.each(data, function (i, item) {
          var $item = $('<tr></tr>')
          $item.append('<td>'+ (i+1) +'</td>')
          $item.append('<td><image style="height:100px" src="'+ item.image +'"></image></td>')
          $item.append('<td>'+ (item.url || '') +'</td>')
          $item.append('<td>'+ (item.description||'') +'</td>')
          $item.append('<td><div class="'+ (item.status?'text-primary':'text-danger') +'">'+ (item.status?i18next.t('info.yes'):i18next.t('info.no')) +'</div></td>')

          if(!item.status) {
            $item.addClass('disable')
          }

          var $handle = $('<td></td>').appendTo($item)

          var $edit = $('<span class="btn btn-primary btn-sm btn-inverse ml5">'+i18next.t('table.compile')+'</span>').appendTo($handle)
          $edit.on('click', function () {
            var bannerInfo = new BannerInfo({
              data: {
                image: item.image,
                url: item.url,
                description: item.description,
                status: item.status
              }
            })
            var popUpBox=new PopUpBox({
              type:'dom',
              style:'default contentScroll',
              submitBtnType:'confirm',
              titleText:i18next.t('popupbox.pleaseselect'),//请选择
              drag:true,
              show: true,
              content: bannerInfo.$dom,
              callback:{
                yes: function (e) {
                  ajaxMethod({
                    url: '/api/adimage/' + item.id,
                    method: 'put',
                    data: bannerInfo.data,
                    success: function (data, status) {
                      if(status.code == 0) {
                        getBannerList()
                        popUpBox.close()
                      }
                    }
                  })
                  return false;
                }
              },
              position:{
                width:950,
                height:620
              }
            })
          })

          var $delete = $('<span class="btn btn-danger btn-sm btn-inverse">'+i18next.t('table.delete')+'</span>').appendTo($handle)
          $delete.on('click', function () {
            _Confirm('',i18next.t('popupbox.deleterecord'), function () {//确认删除该记录
              ajaxMethod({
                url: '/api/adimage/'+ item.id,
                method: 'delete',
                success: function(data, status) {
                  if(status.code == 0) {
                    getBannerList()
                  }
                }
              })
            })
          })

          $tbody.append($item)
        })
      }
    })
  }

  var bannerListLength = 0;

  $('#J_add').on('click', function () {
    var bannerInfo = new BannerInfo()
    var popUpBox=new PopUpBox({
      type:'dom',
      style:'default contentScroll',
      submitBtnType:'confirm',
      titleText:i18next.t('popupbox.pleaseselect'),//'请选择',
      drag:true,
      show: true,
      content: bannerInfo.$dom,
      callback:{
        yes: function (e) {
          ajaxMethod({
            url: '/api/adimage',
            method: 'post',
            data: bannerInfo.data,
            success: function (data, status) {
              if(status.code == 0) {
                getBannerList()
                popUpBox.close()
              }
            }
          })
          return false;
        }
      },
      position:{
        width:950,
        height:620
      }
    })
  })
  getBannerList()
})
